<template>
  <v-md-editor
    :toolbar="toolbar"
    left-toolbar="undo redo clear | tip emoji code | customToolbar | h bold italic strikethrough quote | ul ol table hr | link image  | save "
    :include-level="[1, 2, 3, 4]"
    v-model="current.docInfo.md"
    :height="editHeight + 'px'"
    @save="mySave"
  >
  </v-md-editor>
  <hr>
  <el-radio-group v-model="editKind" size="mini">
    <el-radio-button label="代码"></el-radio-button>
    <el-radio-button label="表格"></el-radio-button>
    <el-radio-button label="API"></el-radio-button>
  </el-radio-group>
  <my-code
    :codeList="current.docInfo.code"
    v-if="editKind === '代码'"
  ></my-code>
 
</template>

<script>
  import { watch,ref  } from 'vue'
  import { ElMessage, ElRadioGroup, ElRadioButton } from 'element-plus'
  import mdController from '../service/md.js'
  import myCode from '../runCode/code-edit-list.vue'

  // 状态
  import { store } from '@naturefw/nf-state'

  // 设置工具栏
  const toolbar = {
    customToolbar: {
      icon: 'v-md-icon-tip',
      title: '加载组件、图片和代码定位',
      menus: [
        {
          name: 'addcomp',
          text: '插入组件',
          action(editor) {
            // toolbar点击时触发的函数
            editor.insert(function (selected) {
              const prefix = `<div 
  id="yourId"
  data-key="compKey"
  data-title="标题"
  data-props='{"msg":"组件的属性，可以不设置"}'
>\n  `;
              const suffix = '\n</div>';
              const placeholder = '加载中';
              const content = selected || placeholder;

              return {
                text: `${prefix}${content}${suffix}`,
                selected: content,
              }
            })
          }
        },
        {
          name: 'addcode',
          text: '代码定位',
          action(editor) {
            // toolbar点击时触发的函数
            editor.insert(function (selected) {
              const prefix = '<div id="';
              const suffix = '">加载中</div>';
              const placeholder = 'codeID';
              const content = selected || placeholder;

              return {
                text: `${prefix}${content}${suffix}`,
                selected: content,
              }
            })
          }
        },
        {
          name: 'addimg',
          text: '插入本地图片',
          action(editor) {
            // toolbar点击时触发的函数
            editor.insert(function (selected) {
              const prefix = '![图片描述]({_baseUrl_}img/';
              const suffix = ')';
              const placeholder = '图片名称';
              const content = selected || placeholder;

              return {
                text: `${prefix}${content}${suffix}`,
                selected: content,
              }
            })
          }
        }
      ]
    }
  }

</script>

<script setup>

  // 获取当前激活的信息
  const current = store.current

  const { loadDocById, saveDoc } = mdController()
  
  // 可见的高度
  const editHeight = document.documentElement.clientHeight - 200

  // 切换
  const editKind = ref('代码')

  // 保存 文档
  const mySave = (text, html) => {
    saveDoc(current)
  }

  let timeout = null
  let isSaved = true
  const timeSave = () => {
    if (isSaved) {
      // 保存过了，重新计时
      isSaved = false
    } else {
      return // 有计时，退出
    }

    timeout = setTimeout(() => {
      // 保存文档
      saveDoc(current).then(() => {
        ElMessage({
          message: '自动保存文档成功！',
          type: 'success',
        })
      })
      isSaved = true
    }, 10000)
  }

  // 定时保存文档
  watch(() => current.docInfo.md, () => {
    timeSave()
  })

</script>